<template>
  <div class="popup">
    <div class="shopbox" v-if="seller.score">
      <p class="shopname">{{ seller.name }}</p>
      <v-star :starnumber="seller.score"></v-star>
    </div>
    <div class="discountbox">
      <v-center-line title="优惠信息"></v-center-line>
      <ul class="discountlist">
        <li v-for="(item,index) in seller.supports" :key='index' :class="'discount'+item.type">{{ item.description }}</li>
      </ul>
    </div>
    <div class="noticebox">
      <v-center-line title="商家公告"></v-center-line>
      <div class="discountdetail">
          <p>{{seller.bulletin}}</p>
      </div>
    </div>
    <div class="fixed-close">
        <van-icon name="cross" size='1.2rem' @click="handleCLickHide" />
    </div>
  </div>
</template>
<script>
import vStar from "@/components/vStar";
import vCenterLine from "@/components/vCenterLine";
export default {
  name: "popup",
  data() {
    return {
      starnumber: 3
    };
  },
  props: {
    seller: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleCLickHide() {
      this.$emit("fnpopuphide");
    }
  },
  components: {
    vStar,
    vCenterLine
  }
};
</script>
<style lang='less' scoped>
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  .shopbox {
    color: white;
    font-size: 0.32rem;
    padding-top: 1.28rem;
    .shopname {
      margin-bottom: 0.32rem;
    }
  }
  .discountbox,
  .noticebox {
    padding-top: 0.56rem;
  }
  .discountlist {
      padding-top: 0.48rem;
      width: 80%;
      margin: 0 auto;
      text-align: left;
      font-size:0.24rem;
      color: white;
      li{
          line-height: 0.32rem;
          margin:0.24rem;
          padding-left: 0.5rem;
          &.discount0{
              background: url('../../assets/images/decrease_2@2x.png') left center no-repeat;
              background-size: auto 0.32rem;
          }
          &.discount1{
              background: url('../../assets/images/discount_2@2x.png') left center no-repeat;
              background-size: auto 0.32rem;
          }
          &.discount2{
              background: url('../../assets/images/guarantee_2@2x.png') left center no-repeat;
              background-size: auto 0.32rem;
          }
          &.discount3{
              background: url('../../assets/images/invoice_2@2x.png') left center no-repeat;
              background-size: auto 0.32rem;
          }
          &.discount4{
              background: url('../../assets/images/special_2@2x.png') left center no-repeat;
              background-size: auto 0.32rem;
          }
      }
  }
  .discountdetail{
      width: 80%;
      margin: 0 auto;
      padding: 0 0.5rem;
      color:white;
      font-size:0.24rem;
      line-height: 0.48rem;
      p{
          padding: 0.48rem 0.3rem 0;
          text-align: left;
      }
  }
  .fixed-close{
      position: fixed;
      left:50%;
      bottom:0.64rem;
      margin-left:-0.6rem;
      color: white;
  }
}
</style>